<template>
    <div class="comment">
        <!-- 顶部 -->
        <app-header>
            <template v-slot:header-left>
                <svg  @click="back" t="1635855361686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2375" width="128" height="128"><path d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z" p-id="2376"></path></svg>
            </template>
            <template v-slot:header-tit>
                发表观点
            </template>
        </app-header>

        <!-- 评论内容 -->
        <div class="contain-box">
            <!-- 加载中动画 -->
            <transition
                leave-active-class="animate__animated animate__fadeOutUp animate__faster">
                <loading  v-if="isLoading"></loading>
            </transition>


             <transition
                enter-active-class="animate__animated animate__fadeInUpBig" >
                <div v-if="!isLoading">
                     <div v-for="item in opinions" :key="item.id">
                        <comment-box :op="item"></comment-box>
                    </div>
                </div>
            </transition>

           
        </div>

        <!-- 底部评论发送区 -->
        <div class="send">
            <input type="text" :placeholder="`请输入您对《${title}》的观点`">
            <button>发送</button>
        </div>

    </div>
</template>

<script>
import appHeader from "../components/app-header.vue"
import commentBox from "../components/comment-box.vue"
import loading from '../components/loading.vue'
export default {
    name:"Comment",
    components:{
        appHeader,
        commentBox,
        loading
    },
    data(){
        return{
            opinions:[],
            title:"",
            isLoading:true,
            loadingTime:300
        }
    },
    methods:{
        back(){
            this.$router.go(-1)
        },
    },
    mounted(){
        let _loading = localStorage.getItem("_loading");
        // 判断是否发起请求
        if(_loading){
            this.isLoading = _loading;//表示正在请求
        }

        this.opinions=this.$route.query.opinions;
        this.title = this.$route.query.title
        let d = setTimeout(()=>{
            this.isLoading = false;// 隐藏正在加载
            localStorage.setItem("_loading",false);
            clearTimeout(d);
        },this.loadingTime);
    }
}
</script>

<style lang="scss" scoped>
.contain-box{
    position: absolute;
    left: 0;
    top: 42px;
    width: 100%;
    height: (100%-14);
    overflow: scroll;
}

.send{
    width: 100%;
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 10px;
    box-sizing: border-box;
    input[type="text"]{
        height: 40px;
        background-color: rgb(241,240,245);
        border: 0;
        border-radius: 5px;
        box-sizing: border-box;
        flex-grow: 1;
        padding-left: 10px;
        outline: none;
        &::placeholder{
            font-size: 14px;
            color: #999;
        }
    }
    button{
        height: 40px;
        width: 50px;
        border-radius: 5px;
        border: 0;
        background-color: rgb(152, 199, 172);
        color: #fff;
        margin-left: 5px;
    }
}

</style>